import { storiesOf } from '@storybook/react'
import React from 'react'

import Icon from './index'

const defaultIcon = () => (
  <div>
    <Icon icon="info-circle"></Icon>
    <Icon icon="location-arrow"></Icon>
    <Icon icon="mail-bulk"></Icon>
  </div>
)
const iconWithTheme = () => (
  <div>
    <Icon icon="coffee" theme="danger"></Icon>
    <Icon icon="coffee" theme="dark"></Icon>
    <Icon icon="coffee" theme="info"></Icon>
    <Icon icon="coffee" theme="light"></Icon>
    <Icon icon="coffee" theme="primary"></Icon>
    <Icon icon="coffee" theme="secondary"></Icon>
    <Icon icon="coffee" theme="success"></Icon>
    <Icon icon="coffee" theme="warning"></Icon>
  </div>
)
const iconWithSize = () => (
  <div>
    <Icon icon="coffee" size="1x"></Icon>
    <Icon icon="coffee" size="2x"></Icon>
    <Icon icon="coffee" size="3x"></Icon>
    <Icon icon="coffee" size="4x"></Icon>
    <Icon icon="coffee" size="5x"></Icon>
    <Icon icon="coffee" size="6x"></Icon>
    <Icon icon="coffee" size="7x"></Icon>
    <Icon icon="coffee" size="8x"></Icon>
  </div>
)
storiesOf('Icon Component', module)
  .add('Default Icon', defaultIcon)
  .add('Different Theme Icon', iconWithTheme)
  .add('Different Size Icon', iconWithSize)
